<template>
	<view class="carlifeMain">
		<scroll-view  :class="{active:sticky}"   class="navScroll" scroll-x="true"  enable-flex >
			<view class="navItem "  :class="currentIndex === index && 'active'"
				@click="currentIndex = index"	v-for="(nav,index) in topics" :key="nav.topicId">
				<text class="navText">{{nav.topicName}}</text>
			</view>
			
		</scroll-view>
		
		<view class="bottomScroll clearfix">
			<view class="bottomScrollItem"  @click="toDetail(goods)"
				v-for="(goods,index) in goodsList" :key="goods.goodsId">
				<image  class="bottomScrollImg" :src="goods.imgUrl" mode=""></image>
				<view class="bottomScrollText">
					<text class="textyaoshi">{{goods.goodsName}}</text>
					<text class="textJiage">￥{{goods.originalPrice}}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {mapGetters}  from  'vuex'
	export default {
		name:'ScrollNav',
		props:['sticky'],
		data() {
			return {
				currentIndex:0
			}
		},
		methods:{
			//点击商品去到detail页面
			toDetail(goods){
				wx.navigateTo({
					url:'/pages/detail/detail?goodsInfo=' + JSON.stringify(goods)
				})
			}
		},
		computed:{
			...mapGetters(['topics']),
			goodsList(){
				return this.topics[this.currentIndex]?.goods || []
			}
		}
	}
</script>

<style  lang="stylus">
	.navScroll
		width 100%
		height 80rpx
		display flex
		&.active
			position sticky
			background-color #FFFFFF
			top 0
		.navItem
			flex-shrink 0
			width 188rpx
			height 80rpx
			line-height 80rpx
			text-align center
			padding 0 30rpx
			box-sizing  border-box
			font-size 32rpx
			color rgb(151, 147, 156)
			font-weight 500
			&.active
				color rgb(0, 0, 0)
				font-weight 600
	.bottomScroll	
		width  calc(100% - 72rpx)
		margin 0 auto
		.bottomScrollItem	
			float  left
			width 310rpx
			height 470rpx
			margin 12rpx
			border 1rpx solid #E8E8E8
			.bottomScrollImg
				width 310rpx
				height 314rpx
				background-size cover
			.bottomScrollText
				width 262rpx
				height 100rpx
				box-sizing  border-box
				margin 0 auto
				margin-top 32rpx
				padding 10rpx 24rpx 
				.textyaoshi
					display block 
					font-size 28rpx
					color #303133
				.textJiage
					font-size 28rpx
					font-weight  500
					color #c4101c
				
</style>
